<template>
    <van-sticky>
        <!-- <AppHeader /> -->
        <van-search class="search-body" v-model="keyword" shape="round" show-action background="#fb7299" @search="onSearch"
            placeholder="请输入搜索关键词">
            <template #action>
                <div class="search-btn" @click="onSearch">搜索</div>
            </template>
        </van-search>
        <van-tabs v-model:active="channelId" @click-tab="changeChannel" shrink animated swipeable :lazy-render="true">
            <van-tab v-for="item in channelList" :key="item.type_id" :name="item.type_id" :title="item.type_name"></van-tab>
        </van-tabs>
    </van-sticky>
    <van-list v-model:loading="loading" :finished="finished" :immediate-check="check" finished-text="精彩内容马上来~"
        @load="onLoad">
        <div class="video-list">
            <AppVideo v-for="item in videoList" :key="item.vod_id" :item="item" />
        </div>
    </van-list>
</template>

<script>
import cfg from '@/database/videoconfig'
export default {
    data() {
        return {
            loading: false,
            finished: false,
            check: false,
            channelId: 1,
            channelList: [],
            videoList: [],
            keyword: '',
            page: 1
        }
    },
    created() {
        this.getChannelLit()
    },
    methods: {
        getChannelLit() {
            useFetch('/api/video', { query: { ac: 'list' } }).then(res => {
                // this.channelList = JSON.parse(res.data.value).class
                this.channelList = JSON.parse(res.data.value).class.filter(v => !cfg.exclude_channel_ids.includes(v.type_id))
                const channelId = useState('channelId')
                if(channelId.value != null && channelId.value != undefined) {
                    this.channelId = channelId
                } else {
                    if (cfg.default_channel_id == null) {
                        this.channelId = this.channelList[0].type_id
                    } else {
                        this.channelId = cfg.default_channel_id
                    }
                    useState('channelId', () => this.channelId)
                }
                this.onLoad()
            })
        },
        changeChannel() {
            // useState('channelId', () => this.channelId)
            this.page = 1
            this.videoList = []
            this.loading = false
            this.finished = true
            this.onLoad()
        },
        onSearch() {
            useFetch('/api/video', { query: { ac: 'detail', wd: this.keyword } }).then(res => {
                const data = JSON.parse(res.data.value)
                this.videoList = data.list
            })
        },
        onLoad() {
            // console.log('onLoad-1', 'loading=' + this.loading, 'finished=' + this.finished)
            // 根据当前页码提取数据,并追加到用于渲染的数组中
            const channelId = useState('channelId')
            useFetch('/api/video', { query: { ac: 'detail', t: this.channelId, pg: this.page } }).then(res => {
                const data = JSON.parse(res.data.value)
                this.videoList.push(...data.list)
                // 数据全部加载完成,不能再继续下滑加载数据了
                if (data.total <= this.videoList.length) {
                    this.finished = true
                } else {
                    this.finished = false
                    this.page++
                }
                this.loading = false
                // console.log('onLoad-2', 'loading=' + this.loading, 'finished=' + this.finished)
            })
        }
    }
}
</script>

<style lang="scss" scoped>
// 视频列表
.video-list {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 5px;
}

.search-body {
    .search-btn {
        color: #f3f3f3;
    }
}

// 视频卡片
.v-card {
    width: 50%;
    padding: 0 5px 10px;

    .card {
        position: relative;
        background: #f3f3f3 url(@/assets/images/default.png) center no-repeat;
        background-size: 36%;
        border-radius: 2px;
        overflow: hidden;

        .card-img {
            .pic {
                height: 100px;
                width: 100%;
                object-fit: cover;
            }
        }

        .count {
            background-image: linear-gradient(0deg, #000000d9, #0000);
            color: #fff;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px 6px;

            span {
                .iconfont {
                    font-size: 12px;
                }
            }
        }
    }

    .title {
        margin-top: 5px;
        font-size: 12px;
        color: #212121;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}
</style>